<template>
    <div class="mall-layout-header">
        <div class="mall-layout-header-container">
            <div class="mall-layout-logo-header">
                <div class="mall-layout-logo-header">
                    <div class="mall-layout-logo-header-left">
                        <div class="img-box" @click="goHome">
                            <img style="width: 100%;" src="../../assets/img/zpw01.png" alt="">
                        </div>
                    </div>
                    <div class="mall-layout-logo-header-right">
                        <div class="mall-layout-search-btn-right">
                            <!-- <div class=" mall-layout-search-home">
                                <div style="display: flex;">
                                    <div class="mall-layout-search mall-layout-search-home ant-input-search">
                                        <img class="mall-layout-search-prefix-icon" src="../../assets/img/index/qiu.gif"></img>
                                        <div class="mall-layout-search-home ant-input-search ant-input">
                                            <el-input placeholder="搜索商品名称/国际条码/SKU编码" v-model="input3"></el-input>
                                        </div>
                                    </div>
                                    
                                    <div class="ant-input-group-addon">
                                        <div style="width: 22px;height: 22px;background-color: #fff;">
                                        </div>
        
                                    </div>
                                </div>
                            </div> -->
                            <div class="mall-layout-header-group-btn">
                                <div :class="active == 3 ? 'mall-layout-header-group-btn-item actcolor' : 'mall-layout-header-group-btn-item'"  @click="goNext('/index/shop/customerManagement')">
                                    <div class="anticon icon">
                                        <i class="el-icon-document" style="width: 24px;height: 24px;"></i>
                                    </div>
                                    <div class="name">管理</div>
                                </div>
                                <div :class="active == 1 ? 'mall-layout-header-group-btn-item actcolor' : 'mall-layout-header-group-btn-item'" @click="goNext('/index/shoppingTrolley')">
                                    <div class="anticon icon">
                                        <i class="el-icon-shopping-cart-2" style="width: 24px;height: 24px;"></i>
                                    </div>
                                    <div class="name">购物车</div>
                                </div>
                                <div :class="active == 2 ? 'mall-layout-header-group-btn-item actcolor' : 'mall-layout-header-group-btn-item'" @click="goNext('/index/order/allOrder')">
                                    <div class="anticon icon">
                                        <i class="el-icon-s-custom" style="width: 24px;height: 24px;"></i>
                                    </div>
                                    <div class="name">订单</div>
                                </div>
                                <!-- <div class="mall-layout-header-group-btn-item">
                                    <div class="anticon icon">
                                        <i class="el-icon-s-shop" style="width: 24px;height: 24px;"></i>
                                    </div>
                                    <div class="name">卖家中心</div>
                                </div> -->
                                <div class="mall-layout-header-group-btn-item">
                                    <div class="anticon icon">
                                        <img src="../../assets/img/index/people.png" alt="" style="width: 24px;height: 24px;border-radius: 50%;">
                                    </div>
                                    <div class="name">
                                        <el-dropdown @command="handleCommand">
                                            <span class="name">
                                              个人中心
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                              <el-dropdown-item command="a">账户中心</el-dropdown-item>
                                              <el-dropdown-item command="b">退出登录</el-dropdown-item>
                                            </el-dropdown-menu>
                                          </el-dropdown>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'homeTop',
        props: {
            active: {
                type: Number,
            }
        },
        data() {
            return {

            }
        },
        created() {

        },
        methods: {
            handleCommand(command) {
                console.log(command);
                if (command == 'a') {
                    this.$router.push('/index/setting/information');
                } else {
                    window.localStorage.setItem("userInfo", "")
                    window.localStorage.setItem("token", "");
                    localStorage.clear()
                    this.$router.replace({
                        path: "/login"
                    });
                }
                // this.$message('click on item ' + command);
            },
            goHome() {
                // this.$router.push('/index/commodity/home')
                window.open('/#/index/commodity/home?type_name=0')
            },
            goNext(url) {
                this.$router.push(url)
            },
        }
    }
</script>

<style lang="scss" scoped>
    .mall-layout-header {
        width: 100%;
        background-color: #fff;
        box-shadow: 0 8px 12px #ccc !important;
    }
    
    .mall-layout-header-container {
        height: 87px;
        display: flex;
        align-items: center;
        margin: 0 auto;
        width: 1280px !important;
    }
    
    .mall-layout-logo-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    
    .mall-layout-logo-header-left {
        display: flex;
        align-items: center;
    }
    
    .img-box {
        width: 71px;
    }
    
    .mall-layout-search-btn-right {
        display: flex;
        align-items: flex-start;
    }
    
    .mall-layout-search-home {
        position: relative;
    }
    
    .mall-layout-search-prefix-icon {
        position: absolute;
        top: 7px;
        left: 9px;
        z-index: 1000;
        width: 30px;
        height: 30px;
    }
    
    .mall-layout-search {
        border-radius: 6PX 0 0 6px;
        border: 1px solid #656efe;
    }
    
    .mall-layout-search-home .ant-input-search {
        width: 500px !important;
    }
    
    .mall-layout-search-home .ant-input-search .ant-input {
        height: 44px;
        padding-left: 55px;
        line-height: 44px;
    }
    
    /deep/ .el-input__inner {
        height: 40px;
        line-height: 40px;
        border: 0;
        width: 89%;
    }
    
    .ant-input-group-addon {
        display: flex;
        width: 80px;
        height: 46px;
        background-color: #656efe;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mall-layout-header-group-btn {
        display: flex;
        gap: 0 !important;
        margin: 0 12px 0 50px;
        justify-content: center;
    }
    
    .mall-layout-header-group-btn-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50px;
        color: #333;
        margin-right: 22px;
        cursor: pointer;
    }
    
    .anticon {
        display: inline-block;
        color: inherit;
        font-style: normal;
        line-height: 0;
        text-align: center;
        text-transform: none;
        vertical-align: -0.125em;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
    
    .mall-layout-header-group-btn-item .icon {
        margin-bottom: 5px;
        font-size: 24px;
    }
    
    .mall-layout-header-group-btn-item .name {
        font-size: 12px;
    }
    
    .mall-layout-header-group-btn-item:hover {
        color: #656efe;
    }
    
    .actcolor {
        color: red;
    }
</style>